<template>
	<div class="app">
		<div class="weather-wrapper">
			<div class="weather-card madrid">
				<div class="weather-icon sun"></div>
				<h1>26º</h1>
				<p>Madrid</p>
			</div>
			<div class="weather-card london">
				<div class="weather-icon cloud"></div>
				<h1>14º</h1>
				<p>London</p>
			</div>
		</div>

		<view class="wrap" v-for="(item, index) in dataCont.topSeven" :key="index" @click="GetWeatherAlone(item)">
			<u-row gutter="16" justify="space-between">
				<u-col span="3">
					<view class="demo-layout bg-purple">{{ item.date }}/{{ item.type }}</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout bg-purple">{{ item.fx }}</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout bg-purple">{{ item.week }}</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout bg-purple">{{ item.ymd }}</view>
				</u-col>
			</u-row>
		</view>

		<u-button @click="showmores">未来15天天气数据</u-button>
		<!-- <u-notice-bar :volume-icon="true" :list="list"></u-notice-bar> -->
		<swiper class="swiper" @change="change">
			<swiper-item>
				<u-grid :col="3" @click="click" hover-class="hover-class">
					<u-grid-item v-for="(item, index) in dataCont.CurrentData" :index="index" :key="index">
						<!-- <u-icon :size="46"></u-icon> -->
						<text class="grid-text">{{ item }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>

		<view class="tqbj" v-if="ispup">
			<popup ref="popup" @close='closePopup'>
				<template v-slot:popup>
					<u-row gutter="24" v-for="(item, index) in dataCont.topAll" :key="index">
						<u-col span="2">
							<view class="demo-layout bg-purple">{{ item.ymd.substring(5,10) }}</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout bg-purple-light">{{ item.week }}</view>
						</u-col>
						<u-col span="2">
							<view class="demo-layout bg-purple-dark">{{ item.type }}</view>
						</u-col>
						<u-col span="5">
							<view class="demo-layout bg-purple-dark">{{ item.fx }}/{{ item.fl }}</view>
						</u-col>
					</u-row>
				</template>
			</popup>
		</view>
	</div>
</template>

<script>
	import Gongge from "../../../../components/SecondaryPackaging/Gongge/Gongge.vue";
	import brokenLine from "../../../../components/Chart/brokenLine";
	import ChineseCityJSON from '@/static/js/sojson_com_city.json'
	import JSONP from 'jsonp'
	import wgs2mars from 'wgs2mars'
	export default {
		data() {
			return {

				list: ["最最高温度最最高温度最最高温度最最高温度"],
				WeatherList: [],
				details: {},
				dataCont: {
					sunrise: [], //日出
					sunset: [], //日落
					Maximum: [], //最最高温度
					Minimum: [], //最低温度
					api: [], //aqi
					fl: [], //风力
					topSeven: [], //前7
					topAll: [], //15
					CurrentData: {},
				},
				more: false,
				ispup:false,
			};
		},
		components: {
			Gongge,
			brokenLine,
		},
		async onLoad() {
			
			// uni.getLocation({
			// 			    type: 'wgs84',
			// 				geocode:true,//设置该参数为true可直接获取经纬度及城市信息
			// 			    success: function (res) {
			// 					console.log(res)
			// 					console.log(wgs2mars(res.longitude,res.latitude),'---')
								
			// 					// const {lat,lng} =  wgs2mars(res.longitude,res.latitude)	
								
			// 					// let str =  `output=jsonp&key=ORVBZ-CC2CW-UGDRY-RTTL4-7XWG5-QUBTT&location=${lat},${lng}`
			// 					// 	JSONP('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
			// 					// 	  console.log(res);
			// 					// 	  uni.hideLoading();
			// 					// 	  if(res.status == 0){
			// 					// 		  that.locationName = res.result.address; //当前定位
			// 					// 	  }
			// 					// 	})
			// 			    },
			// 				fail: function () {
			// 					uni.showToast({
			// 					    title: '获取地址失败，将导致部分功能不可用',
			// 						icon:'none'
			// 					});
			// 				}
			// 			});
						
			if(this.isApp){
				 const cityInfo = await this.APPPLUS.getlocation();
				let  {province,city,district} = cityInfo.address;
				for(let i= 0; i<ChineseCityJSON.length;i++){
					if(district.startsWith(ChineseCityJSON[i].name)){
						// 根据当前定位获取区域名称
						this.GetWeather(ChineseCityJSON[i].city_code)
						break
					}
				}
			}else{
				this.GetWeather()
			}
		
			
			// getlocation
			
			this.EchartsList();
		},
		methods: {
			closePopup(){
					this.ispup = false
			},
			showmores() {
				this.ispup = true
				setTimeout(()=>{
					console.log(this.$refs.popup);
					 this.$refs.popup.show = true;
				},500)
				// this.$refs.popup.show = true;
			},
			async GetWeather(city_code) {
				const data = await this.http(this.api.TheInterface, {
					city_code,
				});
				if (!data) return false;

				// forecast 未来15天天气数据
				let {
					cityInfo,
					data: {
						forecast,
						yesterday
					},
				} = data;
				let {
					sunrise,
					sunset,
					Maximum,
					Minimum,
					api,
					fl,
					topSeven,
					topAll,
					CurrentData,
				} = this.dataCont;

				topSeven.push(...forecast.slice(0, 7));
				topAll.push(...forecast);

				Object.assign(CurrentData, yesterday);

				console.log(CurrentData, yesterday);
				[...forecast].forEach((item) => {
					for (const key in item) {
						switch (key) {
							case "high":
								Maximum.push(this.Public.StringTakeInt(item[key]));
								break;
							case "low":
								Minimum.push(this.Public.StringTakeInt(item[key]));
								break;
							case "sunrise":
								sunset.push(this.Public.StringTakeInt(item[key]));
								break;
							case "sunset":
								sunrise.push(this.Public.StringTakeInt(item[key]));
								break;
							case "aqi":
								api.push(this.Public.StringTakeInt(item[key]));
								break;
							case "fl":
								fl.push(this.Public.StringTakeInt(item[key]));
								break;
						}
					}
				});


			},
			GetWeatherAlone(e) {
				console.log(e);
			},
			change(e) {
				this.current = e.detail.current;
			},
			EchartsList() {
				// console.log(F2);
			},
		}
	};
</script>

<style scoped lang="scss">
	// @import '../../../../static/weather.css';
	
	@import url('../../../../../static/css/weather.css');
	.u-row {
		text-align: center;

		margin: 20rpx 0;
	}

	.demo-layout {
		text-align: center;
		text-align: start;
		height: 80rpx;
		border-radius: 8rpx;
	}


	.tqbj {
		.u-row {
			width: 85vw;
			margin: 15rpx 0;
			border-bottom: 1px inset;
			height: 50rpx;
		}
	}


	.tqbj {
		// background: red;
		height: 60vh;
		width: 100vw;
	}





	
	

	$color1: #C8DAE6;
	$color2: white;
	$color3: #B8B8B8;
	$color4: #FFCD41;
	$color5: #2092A9;



	.weather-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.weather-card {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 125px;
		background-color: $color2;
		box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
		animation: appear 500ms ease-out forwards;

		h1 {
			position: absolute;
			font-family: 'Lato', sans-serif;
			font-weight: 300;
			font-size: 80px;
			color: $color3;
			bottom: 0;
			left: 35px;
			opacity: 0;
			transform: translateX(150px);
			animation: title-appear 500ms ease-out 500ms forwards;
		}

		p {
			position: absolute;
			font-family: 'Lato', sans-serif;
			font-weight: 300;
			font-size: 28px;
			color: lighten($color3, 10%);
			animation: title-appear 1s ease-out 500ms forwards;
		}
	}

	.weather-icon {
		position: relative;
		width: 50px;
		height: 50px;
		top: 0;
		float: right;
		margin: 40px 40px 0 0;
		animation: weather-icon-move 5s ease-in-out infinite;
	}

	.sun {
		background: $color4;
		border-radius: 50%;
		box-shadow: rgba(255, 255, 0, 0.1) 0 0 0 4px;
		animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite;
	}

	@keyframes light {
		from {
			box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px;
		}

		to {
			box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px;
		}
	}

	.cloud {
		margin-right: 60px;
		background: darken($color1, 5%);
		border-radius: 20px;
		width: 25px;
		height: 25px;
		box-shadow:
			darken($color1, 5%) 24px -6px 0 2px,
			darken($color1, 5%) 10px 5px 0 5px,
			darken($color1, 5%) 30px 5px 0 2px,
			darken($color1, 5%) 11px -8px 0 -3px,
			darken($color1, 5%) 25px 11px 0 -1px;


		&:after {
			content: "";
			position: absolute;
			border-radius: 10px;
			background-color: transparent;
			width: 4px;
			height: 12px;
			left: 0;
			top: 31px;
			transform: rotate(30deg);

			animation: rain 800ms ease-in-out infinite alternate;
		}
	}

	@keyframes rain {
		from {
			box-shadow:
				$color5 8px 0px,
				$color5 32px -6px,
				$color5 20px 0px;
		}

		to {
			box-shadow:
				$color5 8px 6px,
				$color5 32px 0px,
				$color5 20px 6px;
		}
	}

	@keyframes weather-icon-move {
		50% {
			transform: translateY(-8px);
		}
	}

	.inspiration {
		margin-top: 80px;
		color: darken($color1, 25%);
		font-family: 'Lato', sans-serif;
		font-weight: 300;
		font-size: 24px;
		text-align: center;


		a {
			color: #FF8F8F;
			font-weight: 400;
			animation: all 300ms ease-in-out;
		}
	}

	@keyframes appear {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(1.05)
		}

		75% {
			transform: scale(0.95)
		}

		100% {
			transform: scale(1)
		}
	}

	@keyframes title-appear {
		from {
			opacity: 0;
			transform: translateX(150px);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}
</style>
